<template>
  <div class="dialog-container">
    <el-dialog
      title="分配排口"
      :visible="dialogVisible"
      append-to-body
      width="40%"
      top="0"
      @close="closeDialog"
      @open="initData"
    >
      <el-checkbox-group v-model="typeValue" @change="menuChange2">
        <el-checkbox v-for="(item, index) in dataScopeList" :key="index + '_dataScope'" :label="item.code" :value="item.code">{{ item.codeName }}</el-checkbox>
      </el-checkbox-group>
      <div style="display: flex;overflow-y: auto;height: 600px;flex-direction: column;">
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"
        />
        <div style="flex: 1;overflow: auto;padding-left: 5px;">
          <div class="outlet-tree-panel">
            <el-tree
              ref="tree"
              v-loading="treeLoading"
              class="filter-tree"
              :data="data"
              :props="defaultProps"
              :highlight-current="true"
              :filter-node-method="filterNode"
              :default-expand-all="true"
              show-checkbox
              node-key="level_id"
              :check-strictly="true"
              :default-checked-keys="dataScopes"
              style="background-color:inherit;padding-top: 10px;"
              @node-click="handleNodeClick"
              @check="menuChange"
            >
              <!-- eslint-disable-next-line vue/no-template-shadow -->
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <!-- style="white-space:normal; word-break:break-all;line-height: 30px;" -->
                <div
                  :title="node.label"
                  style="white-space:normal; word-break:break-all;line-height: 30px;display: flex;width: 100%;align-items: center;"
                  :style="{
                    'font-size': data.level === 3?'15px':'16px','font-weight':data.level !== 2&&data.level !== 3?'bold':'',
                    'padding-left': data.level === 3?'20px':''
                  }"
                >
                  <div>
                    <svg-icon v-if="data.level === 2" icon-class="enterprise" style="width: 1.3em;height: 1.5em;position: relative;top: 2px;color:#977585;" class="outlet-constant-value" />
                    <svg-icon v-else-if="data.level === 3 && data.outletType && data.outletType === 'e012_01'" icon-class="wasteGas" :class="changeColor(data)" style="width: 1.3em;height: 1.3em;" />
                    <svg-icon v-else-if="data.level === 3 && data.outletType && data.outletType === 'e012_02'" icon-class="wasteWater" :class="changeColor(data)" style="width: 1.3em;height: 1.3em;" />
                    <svg-icon v-else-if="data.level === 3 && data.outletType && data.outletType === 'e012_03'" icon-class="wasteWater2" :class="changeColor(data)" style="width: 1.3em;height: 1.3em;" />
                  </div>
                  <!-- 停产字体为黑色 -->
                  <div v-if="data.level === 3" style="line-height: 20px;" :style="{ 'color':data.outletStatus === 'e027_01'? '#606266':'#aaaaaa'}">{{ node.label }}</div>
                  <div v-else style="line-height: 20px;">{{ node.label }}</div>
                </div>
              </span>
            </el-tree>
          </div>

        </div>
        <!-- <div style="height: 150px;padding: 20px 18px 0 18px;">
          <el-row>
            <el-col :span="12" style="margin-bottom: 10px;color: #444;"><i class="el-icon-s-flag" style="margin-right: 5px;font-size: 16px;color: #67C23A" />正常</el-col>
            <el-col :span="12" style="margin-bottom: 10px;color: #444;"><i class="el-icon-s-flag" style="margin-right: 5px;font-size: 16px;color: #F56C6C" />故障(Flag=D)</el-col>
            <el-col :span="12" style="margin-bottom: 10px;color: #444;"><i class="el-icon-s-flag" style="margin-right: 5px;font-size: 16px;color: #E6A23C" />超标</el-col>
            <el-col :span="12" style="margin-bottom: 10px;color: #444;"><i class="el-icon-s-flag" style="margin-right: 5px;font-size: 16px;color: #909399" />离线</el-col>
            <el-col :span="12" style="margin-bottom: 10px;color: #444;"><i class="el-icon-s-flag" style="margin-right: 5px;font-size: 16px;color: #000000" />停运</el-col>
            <el-col :span="12" style="margin-bottom: 10px;color: #444;"><i class="el-icon-s-flag" style="margin-right: 5px;font-size: 16px;color: #409EFF" />恒值</el-col>
          </el-row>
        </div> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="saveLoading" class="sure-btn" size="mini" type="primary" @click="handleSave">保存</el-button>
        <el-button size="mini" class="cancel-btn" @click="closeDialog">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTree } from '@/api/base/outlet'
import { getColorByOutletNewStatus } from '@/utils/common'
import { update } from '@/api/system/user'
export default {
  name: 'OutletTree',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    obj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      filterText: '',
      treeLoading: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dataScopes: [],
      dataScopeList: [{ code: '0_1', codeName: '废气' }, { code: '0_2', codeName: '废水' }, { code: '0_3', codeName: '水站' }, { code: '0_4', codeName: '其他' }],
      typeValue: [],
      data: [],
      saveLoading: false
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getOutletDatas()
  },
  mounted() {},
  methods: {
    initData() {
      if (this.obj.dataScope) {
        var dataScopeArr = this.obj.dataScope.split(',')
        dataScopeArr.forEach(element => {
          if (element.indexOf('0_') !== -1 && element.indexOf('0_0') === -1) {
            this.typeValue.push(element)
          } else if (element !== '') {
            this.dataScopes.push(element)
            this.$nextTick(() => {
              console.log(this.dataScopes.toString())
              this.$refs.tree.setCheckedKeys(this.dataScopes)
            })
          }
        })
      }
    },
    // 过滤
    // filterNode(value, data) {
    //   if (!value) return true
    //   return data.name.indexOf(value) !== -1
    // },
    filterNode(value, data, node) {
      if (!value) return true
      let parentNode = node.parent
      let labels = [node.label]
      let level = 1
      while (level < node.level) {
        labels = [...labels, parentNode.label]
        parentNode = parentNode.parent
        level++
      }
      return labels.some(label => label.indexOf(value) !== -1)
    },
    getOutletDatas() {
      this.treeLoading = true
      getTree().then(res => {
        this.data = [{
          id: null,
          name: '全部',
          children: res.data.list,
          level_id: '0_0'
        }]
        this.recursion(this.data)
        // this.data = res.data.list
        this.treeLoading = false
      }).catch(() => {
        this.treeLoading = false
      })
    },
    // 点击
    handleNodeClick(data, node) {
      this.$emit('handleNodeClick', data, node)
    },
    // 排口颜色
    changeColor(data) {
      return getColorByOutletNewStatus(data.outletNewStatus)
    },
    // 在排口树的数据基础上面增加 统计排口数量以及超标数量
    recursion(data) {
      if (data) {
        data[0].level_id = '0_0'
        data[0].children.forEach(element1 => {
          element1.level_id = element1.level + '_' + element1.id
          element1.children.forEach(element2 => {
            element2.level_id = element2.level + '_' + element2.id
            element2.children.forEach(element3 => {
              element3.level_id = element3.level + '_' + element3.id
            })
          })
        })
      }
    },
    closeDialog() {
      this.$emit('closeDialog')
      this.$emit('flushPage')
      this.$refs.tree && this.$refs.tree.setCurrentKey()
      this.$refs.tree.setCheckedKeys([])
      this.dataScopes = []
      this.typeValue = []
    },
    menuChange(menu) {
      const index = this.dataScopes.indexOf(menu.level_id)
      if (index !== -1) {
        this.dataScopes.splice(index, 1)
      } else {
        this.dataScopes.push(menu.level_id)
      }
      console.log(this.dataScopes.toString())
    },
    menuChange2(menu) {
      console.log(menu)
    },
    handleSave() {
      if (this.typeValue) {
        this.dataScopes.push(this.typeValue)
      }
      if (this.dataScopes && this.obj.id) {
        this.saveLoading = true
        update({ id: this.obj.id, dataScope: this.dataScopes.toString() }).then(() => {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.$emit('flushPage')
          this.$emit('closeDialog')
          this.saveLoading = false
        }).catch(() => {
          this.saveLoading = false
        })
      } else {
        this.$message.error('请勾选相应的权限!')
      }
    }
  }
}
</script>
<style lang="scss">
.outlet-tree-panel{
  .filter-tree .el-tree-node {
    position: relative;
    padding-left: 12px;
  }
  .filter-tree .el-tree-node__children {
    padding-left: 12px;
  }
  .filter-tree .el-tree-node :last-child:before {
    height: 38px;
  }
  .filter-tree .el-tree > .el-tree-node:before {
    border-left: none;
  }
  .filter-tree .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .filter-tree .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .filter-tree .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .filter-tree .el-tree-node__expand-icon.is-leaf {
    display: none;
  }
  .filter-tree .el-tree-node:before {
    border-left: 1px dashed #b8b9bb;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }
  .filter-tree .el-tree-node:after {
    border-top: 1px dashed #b8b9bb;
    height: 20px;
    top: 12px;
    width: 24px;
  }
  .filter-tree{
    .el-tree-node__content{
      line-height: 18px;
      padding-left: 0px !important;
      height: auto;
    }
  }
}
</style>
<style lang='scss' scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
